<template>
    <div class="login-wrap">
        <div class="login_header">
            <!-- <div class="main">
                <img src="@/assets/img/WechatIMG233.png" alt />
            </div>-->
        </div>
        <div class="logo">
            <img src="@/assets/img/logo-login.png" alt />
        </div>
        <div class="ms-login" @keyup.enter="submitForm()">
      <el-form :model="param" :rules="rules" ref="login" label-width="0px" class="ms-content">
        <el-form-item prop="account">
          <el-input v-model="param.account" placeholder="用户名">
            <el-button slot="prepend" icon="el-icon-lx-people"></el-button>
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input type="password" placeholder="密码" v-model="param.password">
            <el-button slot="prepend" icon="el-icon-lx-lock"></el-button>
          </el-input>
        </el-form-item>
        <el-form-item class="autoLogin">
          <el-checkbox v-model="param.autoLogin"></el-checkbox>自动登录
        </el-form-item>
        <div class="login-btn">
          <el-button type="primary" @click="submitForm()">登录</el-button>
        </div>
      </el-form>
    </div>
        <!-- <el-row>
            <el-col :span="24" style="text-align: center">
                <img :src="src" alt="" style="width: 249px; height: 243px" />
                <div>
                    <span v-if="!show" class="ewm">{{ times }}秒后过期</span>
                    <a v-if="!show" href="javascript:;" @click="ewmsx">刷新</a>
                    <span v-if="show" class="ewm">已过期</span>
                    <a v-if="show" href="javascript:;" @click="ewmsx">重新获取</a>
                </div>
                <div>
                    <span class="ewm">请用微信扫描二维码登录</span>
                </div>
     
            </el-col>
        </el-row> -->
                   <!-- <div class="register">
              <el-link type="primary" :href="baseURL+'/person/#/register'" target="_blank">注册找工作</el-link>
              <el-link type="primary" :href="baseURL+'/company/#/register'" target="_blank">免费发职位</el-link>
            </div> -->
    </div>
</template>

<script>
import { login, token, loseMenu, getMenu, getUserlogin, wxLogin } from '../../api/index.js';
import { encrypt } from '../../utils/unitFile';
export default {
    data: function () {
        return {
            param: {
                account: '',
                password: '',
                loginType: 2,
                autoLogin: false
            },
            times: 60,
            timersta: '',
            show: true,
            src: '',
            rules: {
                account: [
                    { required: true, message: '请输入用户名', trigger: 'blur' },
                    { pattern: /^[0-9a-zA-Z_/.~!@#\$%\^&\-=?\/:;,\(\)"'`|*<>+]+$/, message: '账号由数字、字母符号组成' }
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    { pattern: /^[0-9a-zA-Z_]{6,20}$/, message: '密码由长度为6-20的数字、字母或下划线组成' }
                ]
            }
        };
    },
    created() {
        console.log(document.body.clientWidth, 'document.body.clientWidth');
        this.url = process.env.VUE_APP_URL;
        token().then((data) => {
            if (data.success) {
                let clientWidth = document.body.clientWidth;

                if (clientWidth > 750) {
                    this.$message.error(`您已登录无需重复登录！`);
                    this.$router.push({ path: '/' });
                } else {
                    this.loseMenu();
                    // window.location.href = this.url + "/m/#/dataanalysis"
                }
            }
        });
    },
    mounted() {
        // this.getCode();
        // this.timestamp();
        // this.getUserlogin();
        // this.wxLogin();
    },
    methods: {
        loseMenu() {
            loseMenu().then((data) => {
                if (data.success) {
                    let clientWidth = document.body.clientWidth;
                    // this.$message.success('登录成功');
                    if (clientWidth > 750) {
                        localStorage.setItem('homeshow', false);
                        // getMenu().then(res => {
                        //   if (res.success) {
                        //     // this.items = res.data;
                        //     this.$router.push({ path: res.data[0].list[0].route });
                        //   } else {
                        //     this.$message.error(`${res.msg}`)
                        //   }
                        // })
                        if (data.data) {
                            localStorage.setItem('homeshow', false);
                        } else {
                            localStorage.setItem('homeshow', true);
                        }
                        this.$router.push({ path: '/' });
                    } else {
                        if (data.data) {
                            window.location.href = this.url + '/m/#/unemploy';
                        } else {
                            window.location.href = this.url + '/m/#/dataanalysis';
                        }
                    }

                    // window.location.href = this.url + "/m/#/dataanalysis"
                    // window.location.href = "http://10.5.0.12:8080/#/dataanalysis"
                } else {
                }
            });
        },
        submitForm() {
            this.$refs.login.validate((valid) => {
                if (valid) {
                    let query = {
                        account: this.param.account,
                        password: encrypt(this.param.password),
                        loginType: this.param.loginType
                    };
                    login(query).then((data) => {
                        console.log(data);
                        if (data.success) {
                            this.$message.success('登录成功');

                            localStorage.setItem('ad_userName', data.data.userName);
                            // this.$router.push({ path: '/' });
                            this.loseMenu();
                        } else {
                            this.$message.error(`${data.msg}`);
                        }
                    });
                } else {
                    this.$message.error('请输入账号和密码');
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        timestamp() {
            this.timersta = setInterval(() => {
                console.log(33333);
                //  var str = timestamp.substring(8, timestamp.length);
                this.getUserlogin();
            }, 60000);
        },
        getUserlogin() {
            var timestamp = new Date().getTime() + '';
            timestamp = timestamp.substring(0, 8);
            getUserlogin(timestamp).then((data) => {
                if (data.success) {
                    this.src = data.data;
                }
            });
        },
        wxLogin() {
            let timer = setInterval(() => {
                var timestamp = new Date().getTime() + '';
                timestamp = timestamp.substring(0, 8);
                var formData = new FormData();
                formData.append('sceneId', timestamp);
                wxLogin(formData).then((data) => {
                    if (data.success) {
                        //  this.src=data.data
                        this.personalInfo = data.data ? data.data : {};
                        this.isLogin = true;
                        clearInterval(timer);
                        clearInterval(this.timersta);
                    } else {
                    }
                });
            }, 2000);
        },
        ewmsx() {
            this.times = 60;
            this.getCode();
            this.getUserlogin();
            // this.src='http://10.2.11.244:8100/zsrencai/api/ms/user/login/qrcode'
            this.$forceUpdate();
        },
        getCode() {
            this.show = false;
            this.timer = setInterval(() => {
                this.times--;
                if (this.times === 0) {
                    this.show = true;
                    clearInterval(this.timer);
                }
            }, 1000);
        }
    }
};
</script>

<style scoped>
.login-wrap {
    position: relative;
    width: 100%;
    height: 100%;
    background: rgba(246, 246, 248, 1);
    opacity: 1;
}
.login_header {
    width: 100%;
    height: 40px;
    background: rgba(24, 147, 252, 1);
    opacity: 1;
}
.logo {
    text-align: center;
    margin: 60px auto;
    width: 400px;
    height: 78px;
    /* cursor: pointer; */
}
.logo img {
    width: 100%;
    height: 100%;
}
.ms-login {
    padding: 56px;
    width: 424px;
    height: 310px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 3px 6px rgba(51, 51, 51, 0.16);
    opacity: 1;
    border-radius: 8px;
    margin: 108px auto;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
}
.ms-login .autoLogin {
    height: 20px;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 20px;
    color: rgba(153, 153, 153, 1);
    opacity: 1;
}
.el-checkbox {
    margin-right: 6px;
}
.el-form-item {
    width: 312px;
    height: 40px;
    margin-bottom: 20px;
}
.el-form-item /deep/ .el-input__inner {
    width: 264px;
    height: 40px;
}

.login-btn {
    text-align: center;
}
.login-btn button {
    width: 312px;
    height: 40px;
}
.login-tips {
    font-size: 12px;
    line-height: 30px;
    color: #fff;
}
.ewm {
    color: #cac3c3;
    margin-right: 10px;
}
@media screen and (min-width: 360px) and (max-width: 750px) {
    .el-form-item /deep/ .el-input__inner {
        height: 2.5rem;
        width: 16rem;
    }

    .login-btn button {
        width: 18rem;
        height: 2.5rem;
    }
    .ms-login {
        padding: 2rem;
        width: 22rem;
        height: 18rem;
        background: rgba(255, 255, 255, 1);
        box-shadow: 0px 3px 6px rgba(51, 51, 51, 0.16);
        opacity: 1;
        border-radius: 8px;
        margin: 108px auto;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        -ms-box-sizing: border-box;
        -o-box-sizing: border-box;
    }
    .logo {
        text-align: center;
        margin: 3rem auto;
        width: 20rem;
        height: 3rem;
        /* cursor: pointer; */
    }
}
@media screen and (min-width: 300px) and (max-width: 360px) {
    .el-form-item /deep/ .el-input__inner {
        height: 2.5rem;
        width: 12rem;
    }

    .login-btn button {
        width: 15rem;
        height: 2.5rem;
    }
    .ms-login {
        padding: 1.5rem;
        width: 18rem;
        height: 15rem;
        background: rgba(255, 255, 255, 1);
        box-shadow: 0px 3px 6px rgba(51, 51, 51, 0.16);
        opacity: 1;
        border-radius: 8px;
        margin: 108px auto;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        -ms-box-sizing: border-box;
        -o-box-sizing: border-box;
    }
    .logo {
        text-align: center;
        margin: 2.5rem auto;
        width: 16rem;
        height: 3rem;
        /* cursor: pointer; */
    }
}
</style>
